<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .outher {
      width: 300px;
      height: 300px;
      background-color: #f4f4f4;
      user-select: none;
      overflow: hidden;
    }
    .outher .wapper {
      position: relative;
      background-color: skyblue;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .outher .wapper .left,.right {
      position: absolute;
      width: 150px;
      height: 100%;
      overflow: hidden;
    }
    .outher .wapper .left {
      left: 0;
      background-color: springgreen;
    }
    .outher .wapper .right {
      right: 0;
      background-color: darkcyan;
    }
    .left div,.right div {
      position: absolute;
      width: 150px;
      height: 100%;
      color: #fff;
      font-size: 22px;
    }
    .left div {
      /*旋转中心点*/
      transform-origin: right center;
    }
    .right div {
      /*旋转中心点*/
      transform-origin: left center;
    }
    .left .one {
      background-color: blueviolet;
    }
    .left .two {
      background-color: green;
      transform: rotate(-45deg);
    }
    .left .three {
      background-color: blue;
      transform: rotate(-90deg);
    }
    .left .four {
      background-color: hotpink;
      transform: rotate(-135deg);
    }

    .right .one {
      background-color: hotpink;
    }
    .right .two {
      transform: rotate(45deg);
      background-color: blue;
    }
    .right .three {
      background-color: green;
      transform: rotate(90deg);
    }
    .right .four {
      transform: rotate(135deg);
      background-color: #fff;
      color: #000;
    }
    .left span.text {
      position: absolute;
      left: 50%;
      top: 30px;
      transform: rotate(-25deg);
    }
    .right span.text {
      position: absolute;
      left: 12%;
      top: 30px;
      transform: rotate(25deg);
    }
    .outher .circle {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      border-radius: 50%;
      line-height: 90px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      background-color: red;
      cursor: pointer;
    }
    .outher .circle::after {
      content: "";
      position: absolute;
      top: -70px;
      left: 50%;
      transform: translate(-50%);
      border: 40px solid red;
      border-left-width: 10px;
      border-right-width: 10px;
      border-left-color: transparent;
      border-top-color: transparent;
      border-right-color: transparent;
    }
  </style>
</head>
<body>
  <div class="outher">
    <div class="wapper">
      <div class="left">
        <div class="one"><span class="text">苹果</span></div>
        <div class="two"><span class="text">华为</span></div>
        <div class="three"><span class="text">三星</span></div>
        <div class="four"><span class="text">魅族</span></div>
      </div>
      <div class="right">
        <div class="one"><span class="text">vivo</span></div>
        <div class="two"><span class="text">oppo</span></div>
        <div class="three"><span class="text">小米</span></div>
        <div class="four"><span class="text">未中奖</span></div>
      </div>
    </div>
    <div class="circle">抽奖</div>
  </div>
  <script src="./index.js"></script>
</body>
</html>